<template>
  <div class="app-container">
    <div class="container_box">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="客戶名稱" prop="customerName">
                  <el-input
                    v-model="form.customerName"
                    placeholder="請輸入客戶名稱"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="聯繫人" prop="contacts">
                  <el-input
                    v-model="form.contacts"
                    placeholder="請輸入聯繫人"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="區號" prop="diallingCode">
                  <el-input
                    v-model="form.diallingCode"
                    placeholder="請輸入區號"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="客戶類型" prop="customerType">
                  <el-select
                    style="width: 100%"
                    v-model="form.customerType"
                    placeholder="請選擇客戶類型"
                  >
                    <el-option
                      v-for="dict in dict.type.customer_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="聯繫電話" prop="telPhone">
                  <el-input
                    v-model="form.telPhone"
                    placeholder="請輸入聯繫電話"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="證件類型" prop="cardType">
                  <el-select
                    style="width: 100%"
                    v-model="form.cardType"
                    placeholder="請選擇證件類型"
                  >
                    <el-option
                      v-for="dict in dict.type.cart_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="證件號" prop="cardNo">
                  <el-input v-model="form.cardNo" placeholder="請輸入證件號" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="郵箱" prop="email">
                  <el-input v-model="form.email" placeholder="請輸入郵箱" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="傳真" prop="facsimile">
                  <el-input v-model="form.facsimile" placeholder="請輸入傳真" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="聯繫地址" prop="address">
                  <el-input
                    v-model="form.address"
                    placeholder="請輸入聯繫地址"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="性別" prop="sex">
                  <el-select
                    style="width: 100%"
                    v-model="form.sex"
                    placeholder="請選擇性別"
                  >
                    <el-option
                      v-for="dict in dict.type.sys_user_sex"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="年齡" prop="age">
                  <el-input v-model="form.age" placeholder="請輸入年齡" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="所屬行業" prop="industry">
                  <el-select
                    style="width: 100%"
                    v-model="form.industry"
                    placeholder="請選擇所屬行業"
                  >
                    <el-option
                      v-for="dict in dict.type.industry_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="手機號" prop="mobile">
                  <el-input v-model="form.mobile" placeholder="請輸入手機號" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="公司地址" prop="companyAddr">
                  <el-input
                    v-model="form.companyAddr"
                    placeholder="請輸入公司地址"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="客戶標籤" prop="customerTag">
                  <el-select
                    style="width: 100%"
                    v-model="form.customerTag"
                    placeholder="請選擇客戶標籤"
                  >
                    <el-option
                      v-for="dict in dict.type.customer_tag"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="客戶等級" prop="customerLevel">
                  <el-select
                    style="width: 100%"
                    v-model="form.customerLevel"
                    placeholder="請選擇客戶等級"
                  >
                    <el-option
                      v-for="dict in dict.type.customer_level"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="客戶來源" prop="customerSource">
                  <el-select
                    style="width: 100%"
                    v-model="form.customerSource"
                    placeholder="請選擇客戶來源"
                  >
                    <el-option
                      v-for="dict in dict.type.customer_source"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="備註" prop="remark">
                  <el-input v-model="form.remark" placeholder="請輸入備註" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="text-align: center">
            <el-button
              type="primary"
              :disabled="btn_disable"
              @click="submitForm"
              >確 定</el-button
            >
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  listCustomer,
  getCustomer,
  delCustomer,
  addCustomer,
  updateCustomer,
} from "@/api/biz/customer";
export default {
  name: "CustomerAdd",
  dicts: [
    "customer_type",
    "customer_tag",
    "customer_source",
    "industry_type",
    "cart_type",
    "sys_user_sex",
    "customer_level",
  ],
  data() {
    return {
      // 表单參數
      btn_disable: false,
      form: {},
      // 表单校验
      rules: {
        email: [
          { required: true, message: "郵箱地址不能為空", trigger: "blur" },
          {
            type: "email",
            message: "請輸入正確的郵箱地址",
            trigger: ["blur", "change"],
          },
        ],
        customerName: [
          { required: true, message: "客戶名稱不能為空", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    /** 提交按钮 */
    submitForm() {
  
      this.form.customerSource = "20";
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btn_disable = true;
          addCustomer(this.form)
            .then((response) => {
              setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
              this.$modal.msgSuccess("新增成功");
              this.$tab.closePage().then(() => {
                // 执行結束的逻辑
                const obj = { path: "/customer/customer", name: "Customer" };
                this.$tab.refreshPage(obj);
              });
            })
            .catch((err) => {
              setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
              console.log(err);
            });
        }
      });
    },
    cancel() {
      this.$tab.closePage().then(() => {
        // 执行結束的逻辑
        const obj = { path: "/customer/customer", name: "Customer" };
        this.$tab.refreshPage(obj);
      });
    },
  },
};
</script>
